<template>
  <div id="index">
    <a-layout id="components-layout-side" style="height: 100vh">
      <a-layout-sider :collapsed="$store.state.collapsed">
        <div class="logo" :class="$store.state.collapsed?['logo-mini']:['']">
          <span class="logo-title">{{ $Config.title }}</span>
        </div>
        <c-menu :menus="menu_routers" :class="$store.state.collapsed?['menu-mini']:['']" @goto-page="gotoPage" />
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #001529;color: white; padding: 0">
          <div style="width: 72px;float: left;z-index: 88">
            <div
              v-if="$store.state.collapsed"
              class="trigger"
              @click="setCollapsed(false)"
            >
              <menu-unfold-outlined />
            </div>
            <div v-else class="trigger" @click="setCollapsed(true)">
              <menu-fold-outlined />
            </div>
          </div>
          <div style="width: calc(100% - 72px - 250px);height: 100%;float: left;">
            <c-nav :menus="menu_routers" />
          </div>
          <div style="float: right;margin-right: 20px" class="tools-bar">
            <div class="tools-btn"> <i class="iconfont" :class="'icon-search'" /></div>
            <div class="tools-btn" @click="screenClick"> <i class="iconfont" :class="isFullscreen ? 'icon-fullscreen-exit' :'icon-fullscreen'" /></div>
            <a-dropdown>  <!--:trigger="['click']"-->
              <a class="ant-dropdown-link" style="margin-left: 10px;color: white" @click="e => e.preventDefault()">
                <!--<img src="../assets/logo.png" style="width: 30px;height: 30px;"/>-->
                <a-avatar size="32">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                {{ $store.state.user.userName }} <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="0">
                    <a href="http://www.alipay.com/">个人中心</a>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="3" @click="logout">
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-layout-header>
        <a-layout-content style="margin: 0 0px;padding: 0">
          <!--<a-breadcrumb style="margin: 16px 0; text-align: left">
                      <a-breadcrumb-item>User</a-breadcrumb-item>
                      <a-breadcrumb-item>Bill</a-breadcrumb-item>
                  </a-breadcrumb>-->
          <a-tabs :active-key="activeKey" class="custom-tab-class" hide-add type="editable-card" @change="changeTab" @edit="onEdit">
            <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
              <!--{{ pane.content }}-->
            </a-tab-pane>
          </a-tabs>
          <div style="height:calc(100vh - 64px)" :style="{ padding: '0px', minHeight: '360px' }"><!-- background: '#001529',-->
            <router-view />
          </div>
        </a-layout-content>
        <!--<a-layout-footer style="text-align: center;height: 30px;padding: 0;margin: 0">
                  ©2018 Created by
              </a-layout-footer>-->
      </a-layout>
    </a-layout>
    <div v-show="showNav" style="background: #001529AA;position: fixed;width: 100%;height: 150px;bottom: 0px;left: 0px">
      <a-row type="flex" justify="center" style="margin-top: 15px;text-align: center">
        <a-col :span="3">
          <a-button type="primary" style="width: 90%;height: 120px" />
        </a-col>
        <a-col :span="3">
          <a-button type="primary" style="width: 90%;height: 120px" />
        </a-col>
        <a-col :span="3">
          <a-button type="primary" style="width: 90%;height: 120px" />
        </a-col>
        <a-col :span="3">
          <a-button type="primary" style="width: 90%;height: 120px" />
        </a-col>
      </a-row>
    </div>
    <div style="background: #001529FF;border-radius: 50px;padding-top: 7px;position: fixed;z-index: 999;width: 50px;height: 50px;bottom: 10px;right: 5px;text-align: center;color: white;font-size: 24px">
      <menu-unfold-outlined
        v-if="showNav"
        class="trigger"
        @click="() => (showNav = !showNav)"
      />
      <menu-fold-outlined v-else class="trigger" @click="() => (showNav = !showNav)" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex' // , mapState
import CMenu from '@/components/CMenu'
import CNav from '@/components/CNav'
import screenfull from 'screenfull'
export default {
  components: {
    CMenu,
    CNav
  },
  data() {
    return {
      // menus: [],
      showNav: false,
      selectedKeys: ['xxx1'],
      loading: true,
      isFullscreen: false,
      panes: [
        { title: '首页', key: '0101', path: '/', closable: false }
      ],
      activeKey: '0101',
      newTabIndex: 0
    }
  },
  computed: {
    ...mapGetters([
      'menu_routers'
    ])
    /* ...mapState({
          collapsedxx: state => state.collapsed
        }),
        ...mapGetters([
            'collapsed'
        ]),*/
  },
  watch: {
    '$store.state.collapsed': function() {
      console.log('$store.state.collapsed$store.state.collapsed', this.$store.state)
      return this.$store.state.collapsed
    },
    'collapsed': function() {
      console.log('$store.state.collapsed$store.state.collapsed  collapsed', this.$store.state)
      return this.$store.state.collapsed
    },
    '$route'(to, from) {
      console.log(to)
      console.log(from)
    }
  },
  created() {
    if (screenfull.enabled) {
      screenfull.on('change', this.change)
    }
    /* this.$store.dispatch('GetMenus', {}).then(res => {
          console.log("xxx", res)
          this.menus = res
      })*/
  },
  mounted() {
  },
  beforeUnmount() {
    if (screenfull.enabled) {
      screenfull.off('change', this.change)
    }
  },
  methods: {
    loadMap() {
    },
    setCollapsed(val) {
      console.log(this.$store.state.collapsed)
      this.$store.commit('SET_COLLAPSED', !this.$store.state.collapsed)
      console.log(this.$store.state.collapsed)
      this.$forceUpdate()
    },
    toPage(item) {
      console.log(item)
      this.$router.push({
        path: item.path
      })
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    screenClick() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    gotoPage(item) {
      let flag = false
      this.panes.forEach(data => {
        if (data.key === item.name) {
          flag = true
        }
      })
      if (flag) {
        this.activeKey = item.name
      } else {
        this.panes.push({
          title: item.title,
          key: item.name,
          path: item.path,
          closable: true
        })
        this.activeKey = item.name
      }
    },
    changeTab(activeKey) {
      let item
      this.panes.forEach(data => {
        if (data.key === activeKey) {
          item = data
        }
      })
      if (item) {
        this.$router.push({
          path: item.path
        })
        this.$bus.$emit('do-change-selected', item.key)
      }
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    remove(targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    },
    logout() {
      this.$store.dispatch('LogOut')
        .then((res) => {
          console.log('LogOutres', res)
          this.$router.push({ path: '/login' })
        })
        .catch((error) => {
          console.log('LogOuterror', error)
          this.$router.push({ path: '/login' })
        })
    }
  }
}
</script>
<style>
    .menu-mini .ant-menu-item span{
        display: none;
    }

    .custom-tab-class .ant-tabs-bar{
        margin: 0 0 0px 0 !important;
    }
</style>
<style lang="scss" scoped>
    #index{
      width: 100%;
      height: 100%;
    }
    #components-layout-side .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    #components-layout-side .trigger:hover {
        color: #1890ff;
    }
    #components-layout-side .logo {
        height: 40px;
        background-position: left;
        background-size: contain;
        background-repeat:no-repeat;
         /*background: rgba(255, 255, 255, 0.2);*/
         background-image: url("../assets/logo.png");
         margin: 10px;
        color: white;
        font-size: 15px;
        white-space: nowrap;
        padding-left: 40px;
        line-height: 40px;
     }
    #components-layout-side .logo-mini {
        background-position:top;
    }
    #components-layout-side .logo-mini .logo-title{
        transition: display 1s; display: none;
    }

    .tools-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        .tools-btn {
            cursor: pointer;
            width: 30px;
            height: 30px;
            line-height: 16px;

            color: white;
            margin-right: 5px;
            padding: 7px;
            border-radius: 5px;
            .iconfont{
                font-size: 20px !important;
            }
        }

        .tools-btn:hover {
            background-color: #cccccc55;
        }
    }
</style>
